<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>SpreadJS Excel 组件测试</span>
        <div style="float: right;">
          <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddRow">添加行</el-button>
          <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDeleteRow">删除行</el-button>
          <el-button type="success" size="small" icon="el-icon-check" @click="handleGetData">获取数据</el-button>
          <el-button type="info" size="small" icon="el-icon-download" @click="handleExport">导出Excel</el-button>
        </div>
      </div>

      <el-row :gutter="20" style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-alert
            title="SpreadJS组件测试页面"
            type="info"
            :closable="false"
            show-icon>
            <div>这是一个SpreadJS组件的测试页面，可以测试以下功能：</div>
            <ul style="margin: 10px 0; padding-left: 20px;">
              <li>动态加载SpreadJS资源（按需加载，不影响其他页面）</li>
              <li>Excel式的数据编辑</li>
              <li>添加/删除行</li>
              <li>数据获取和验证</li>
              <li>Excel导出功能</li>
              <li>
                <el-switch
                  v-model="useDesigner"
                  active-text="Designer模式"
                  inactive-text="普通模式"
                  @change="handleModeChange">
                </el-switch>
              </li>
            </ul>
          </el-alert>
        </el-col>
      </el-row>

      <div style="height: 600px; border: 1px solid #ddd;">
        <spread-js
          v-if="showSpreadJS"
          ref="spreadjs"
          :columns="columns"
          :data="tableData"
          :readonly="false"
          :use-designer="useDesigner"
          :container-id="'test-spreadjs'"
        />
      </div>

      <!-- 数据预览对话框 -->
      <el-dialog title="数据预览" :visible.sync="dataDialogVisible" width="800px">
        <el-table :data="previewData" border max-height="400">
          <el-table-column
            v-for="col in columns"
            :key="col.fieldName"
            :prop="col.fieldName"
            :label="col.fieldLabel"
            :min-width="100"
          />
        </el-table>
        <div slot="footer">
          <el-button @click="dataDialogVisible = false">关 闭</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SpreadJS from '@/components/SpreadJS/index.vue'

export default {
  name: 'SpreadJSTest',
  components: {
    'spread-js': SpreadJS
  },
  data() {
    return {
      // 列配置
      columns: [
        {
          fieldName: 'name',
          fieldLabel: '姓名',
          fieldType: 'varchar',
          width: 120
        },
        {
          fieldName: 'age',
          fieldLabel: '年龄',
          fieldType: 'int',
          width: 80
        },
        {
          fieldName: 'department',
          fieldLabel: '部门',
          fieldType: 'varchar',
          width: 150
        },
        {
          fieldName: 'position',
          fieldLabel: '职位',
          fieldType: 'varchar',
          width: 120
        },
        {
          fieldName: 'salary',
          fieldLabel: '薪资',
          fieldType: 'int',
          width: 100
        },
        {
          fieldName: 'email',
          fieldLabel: '邮箱',
          fieldType: 'varchar',
          width: 200
        }
      ],
      // 表格数据
      tableData: [
        {
          id: 1,
          name: '张三',
          age: 28,
          department: '技术部',
          position: '高级工程师',
          salary: 15000,
          email: 'zhangsan@example.com'
        },
        {
          id: 2,
          name: '李四',
          age: 32,
          department: '产品部',
          position: '产品经理',
          salary: 18000,
          email: 'lisi@example.com'
        },
        {
          id: 3,
          name: '王五',
          age: 26,
          department: '设计部',
          position: 'UI设计师',
          salary: 12000,
          email: 'wangwu@example.com'
        }
      ],
      // 数据预览
      previewData: [],
      dataDialogVisible: false,
      // Designer模式开关
      useDesigner: false,
      showSpreadJS: true
    }
  },
  methods: {
    // 添加行
    handleAddRow() {
      this.$refs.spreadjs.addRow()
      this.$message.success('已添加新行')
    },

    // 删除行
    handleDeleteRow() {
      this.$refs.spreadjs.deleteSelectedRows()
      this.$message.success('已删除选中行')
    },

    // 获取数据
    handleGetData() {
      const data = this.$refs.spreadjs.getData()
      console.log('获取的数据:', data)
      
      this.previewData = data
      this.dataDialogVisible = true
      
      this.$message.success(`获取到 ${data.length} 条数据`)
    },

    // 导出Excel
    handleExport() {
      const fileName = `测试数据_${new Date().getTime()}.xlsx`
      this.$refs.spreadjs.exportExcel(fileName)
      this.$message.success('导出成功')
    },

    // 切换模式
    handleModeChange(val) {
      this.$message.info('切换模式需要重新加载组件...')
      // 隐藏组件
      this.showSpreadJS = false
      // 等待DOM更新后重新显示
      this.$nextTick(() => {
        setTimeout(() => {
          this.showSpreadJS = true
          this.$message.success(`已切换到${val ? 'Designer' : '普通'}模式`)
        }, 100)
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

::v-deep .el-alert ul {
  list-style-type: disc;
}
</style>

